<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Ripple Effect Button</title>
	<style>
		.ripple-button {
			overflow: hidden;
			padding: 10px 20px;
			font-size: 16px;
			color: white;
			background-color: forestgreen;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			outline: none;
		}

		.ripple {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			transform: scale(0);
			animation: ripple-animation 1s ease-out;
			pointer-events: none;
		}

		@keyframes ripple-animation {
			to {
				transform: scale(4);
				opacity: 0;
			}
		}
	</style>
</head>
<body>
<button class="ripple-button">Click Me</button>
<script>
	document.querySelector('.ripple-button').addEventListener('mousedown', function (e) {
		const button = e.currentTarget;
		const rect = button.getBoundingClientRect();
		const ripple = document.createElement('span');

		const size = Math.max(rect.width, rect.height);
		ripple.style.width = ripple.style.height = `${size}px`;

		const x = e.clientX - rect.left - size / 2;
		const y = e.clientY - rect.top - size / 2;
		ripple.style.left = `${x}px`;
		ripple.style.top = `${y}px`;

		ripple.classList.add('ripple');
		button.appendChild(ripple);

		ripple.addEventListener('animationend', () => {
			ripple.remove();
		});
	});
</script>
</body>
</html>